<template>
  <div>
    <el-input v-model="itemName" style="width: 240px" placeholder="护理项目名称" />
    <el-button plain  @click="listNurseContent()">查询</el-button>

    <el-button round type="primary" @click="toAdd">添加</el-button>
    <el-divider />

    <div class="flex flex-col items-start gap-4">
      <el-segmented v-model="value" :options="options" size="default" @change="handleChange" />
    </div>
    <el-table :data="nurseContentList" stripe style="width: 100%" @row-click="addItemToLevel">
          <el-table-column type="index" label="序号" width="80"/>
          <el-table-column prop="serialNumber" label="编号"  />
          <el-table-column prop="nursingName" label="名称"  />
          <el-table-column prop="servicePrice" label="价格"  />
          <el-table-column prop="executionCycle" label="执行周次"  />
          <el-table-column prop="executionTimes" label="执行次数"  />
          <el-table-column prop="message" label="描述"  />
          <el-table-column prop="status" label="状态" >
            <template #default="scope">
              <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
              <el-tag v-else type="danger">停用</el-tag>
            </template>
          </el-table-column>
          <el-table-column  label="操作"  >
            <template #default="scope">
              <el-link type="primary" @click="toEdit(scope.row)"><el-icon><Edit /></el-icon>修改</el-link> &nbsp;&nbsp;
              <el-link type="danger" @click="deleteItemToLevel(scope.row)"><el-icon><Delete /></el-icon>删除</el-link>
            </template>
          </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="page"
      v-model:page-size="pageSize"
      @current-change="handleCurrentChange"
      size="small"
      background
      layout="prev, pager, next"
      :total=total
      class="mt-4"
    />
    <!-- 新增或修改对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="title" width="500">
      <el-form :model="nurseContent">
        <el-form-item label="编号" >
          <el-input v-model="nurseContent.serialNumber" autocomplete="off" />
        </el-form-item>

        <el-form-item label="名称" >
          <el-input v-model="nurseContent.nursingName" autocomplete="off" />
        </el-form-item>

        <el-form-item label="价格" >
          <el-input v-model="nurseContent.servicePrice" autocomplete="off" />
        </el-form-item>

        <el-form-item label="执行周期" >
          <el-input v-model="nurseContent.executionCycle" autocomplete="off" />
        </el-form-item>

        <el-form-item label="执行次数" >
          <el-input v-model="nurseContent.executionTimes" autocomplete="off" />
        </el-form-item>

        <el-form-item label="描述" >
          <el-input v-model="nurseContent.message" autocomplete="off" />
        </el-form-item>

        <el-form-item label="状态" >
          <el-select v-model="nurseContent.status" placeholder="状态">
            <el-option label="启用" value="1" />
            <el-option label="停用" value="2" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="saveOrEditNurseContent">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import NurseContentApi from '@/api/NurseContent.js'
  export default {
    data() {
      return {
        itemName: '',
        nurseContentList:[],
        page: 1,
        pageSize: 10,
        total: 0,
        options:['启用','停用'],
        value: '启用',
        title:'添加护理项目',
        dialogFormVisible:false,
        nurseContent:{}
      }
    },
    methods: {
      deleteItemToLevel(row){
        if(confirm('确定删除吗？')){
          NurseContentApi.deleteItemToLevel({
            id:row.id,
          }).then(res=>{
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.listNurseContent();
          })
        }
      },
      toEdit(row){
        this.title = '修改护理项目'
        this.dialogFormVisible = true
        this.nurseContent = JSON.parse(JSON.stringify(row));
      },
      saveOrEditNurseContent(){
        if(this.title == '添加护理项目'){
          NurseContentApi.saveNurseContent(this.nurseContent).then(res => {
            this.$message.success('保存成功')
            this.dialogFormVisible = false
            this.listNurseContent()
          })
        }else{
          NurseContentApi.updateNurseContent(this.nurseContent).then(res => {
            this.$message.success('修改成功')
            this.dialogFormVisible = false
            this.listNurseContent()
          })
        }
      },
      toAdd(){
        this.title = '添加护理项目'
        this.dialogFormVisible = true
        this.nurseContent = {}
      },
      handleChange(val){
        if(val == '启用'){
          this.status = 1
        }else{
          this.status = 2
        }
        this.page = 1;
        this.listNurseContent()
      },
      handleCurrentChange(val){
        this.page = val;
        // 查询
        this.listNurseContent()
      },
      listNurseContent(){
        NurseContentApi.findNurseItemPage({
          page: this.page,
          pageSize: this.pageSize,
          itemName: this.itemName,
          status: this.status
        }).then(res => {
          this.nurseContentList = res.data.records
          this.total = res.data.total
        })
      },
    },
    created(){
      this.listNurseContent()
    }
  }
</script>

<style scoped>

</style>